<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html class="no-js" lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>注册界面</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon"
	href="assets/img/favicon.ico">

<!-- CSS 
    ========================= -->
<!--bootstrap min css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<!--ionicons css-->
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<!--linearicons css-->
<link rel="stylesheet" href="assets/css/linearicons.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css">

<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">

<!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<script type="text/javascript">
	function user() {
		var text = document.getElementById("num1").value;
		var s = document.getElementById("span1");
		var patt = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
		var flag = patt.test(text);
		if (flag) {
			s.innerHTML = "<font color='green'>用户名合法</font>"
		} else {
			s.innerHTML = "<font color='red'>用户名必须以字母开头,用户名包含大小写字母数字，长度4到15位</font>"
		}
		return flag;
	}
	//验证密码
	function psd() {
		var text2 = document.getElementById("num2").value;
		var s = document.getElementById("span2");
		var patt = /^[\w_-]{6,16}$/
		var flag = patt.test(text2);
		if (flag) {
			s.innerHTML = "<font color='green'>用户密码合法</font>"
		} else {
			s.innerHTML = "<font color='red'>密码可以包含字母数组下划线,长度6到16位</font>"
		}
		return flag;
	}

	function address() {
		var text3 = document.getElementById("num3").value;
		var s = document.getElementById("span3");
		var patt = /^[\u4e00-\u9fa5]+$/;
		var flag = patt.test(text3);
		if (flag) {
			s.innerHTML = "<font color='green'>用户地址合法</font>"
		} else {
			s.innerHTML = "<font color='red'>用户地址必须使用中文</font>"
		}
		return flag;
	}

	function call() {
		var text4 = document.getElementById("num4").value;
		var s = document.getElementById("span4");
		var patt = /^1[34578]\d{9}$/
		var flag = patt.test(text4);
		if (flag) {
			s.innerHTML = "<font color='green'>用户手机号码合法</font>"
		} else {
			s.innerHTML = "<font color='red'>输入正确的手机号码！</font>"
		}
		return flag;
	}

	//全部验证，然后返回给onsubmit做验证
	function checkall() {
		if (user() && psd() && address() && call()) {
			return true;
		} else {
			return false;
		}
	}
</script>
</head>

<body>

	<jsp:include page="head.jsp"></jsp:include>
	<!--header area end-->

	<!--breadcrumbs area start-->
	<div class="breadcrumbs_area">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="breadcrumb_content">
						<h3>用户注册界面</h3>
						<ul>
							<li><a href="index.html">首页</a></li>
							<li>注册界面</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--breadcrumbs area end-->

	<!-- customer login start -->
	<div class="customer_login">
		<div class="container">
			<div class="row">


				<!--register area start-->
				<div class="col-lg-6 col-md-6">
					<div class="account_form register">
						<h2>注册</h2>
						<table border="0" width="1100px">
							<form action="UserServlet" method="post"
								onsubmit="return checkall()">
								<tr>
									<td>
										<p>
											<label>用户名<span>*</span></label> <input type="text"
												name="username" id="num1" required="required"
												placeholder="请输入用户名名" onblur="user()">
										</p>
									</td>
									<td>
										<p>
											<label>用户密码<span>*</span></label> <input type="text"
												name="userpwd" id="num2" required="required"
												placeholder="请输入用户密码" onblur="psd()">
										</p>
									</td>


								</tr>
								<tr>
									<td><span id="span1"></span></td>
									<td><span id="span2"></span></td>
								</tr>
								<tr>
									<td>
										<p>
											<label>用户地址 <span>*</span></label> <input type="text"
												name="address" id="num3" required="required"
												placeholder="请输入地址" onblur="address()">
										</p>
									</td>
									<td>
										<p>
											<label>用户电话 <span>*</span></label> <input type="text"
												name="usercall" id="num4" required="required"
												placeholder="请输入电话" onblur="call()">


										</p>
									</td>
								</tr>
								<tr>
									<td><span id="span3"></span></td>
									<td><span id="span4"></span></td>
								</tr>
								<tr>
									<td>
										<p>
											<label>用户性别 <span>*</span></label> <br /> <select
												name="usersex" class="select_option">
												<option value="男">男</option>
												<option value="女">女</option>
											</select>
										</p>
									</td>

								</tr>
								<tr>
									<td colspan="2">
										<div class="login_submit">
											<input type="hidden" name="op" value="add" />
											<button type="submit" value="注册">注册</button>
										</div>
									</td>
								</tr>
							</form>
						</table>
					</div>
				</div>
				<!--register area end-->
			</div>
		</div>
	</div>
	<!-- customer login end -->

	<!--footer area start-->
	<jsp:include page="footer.jsp"></jsp:include>


</body>

</html>